<template>
  <page>
    <div class="left-sec">
      <div class="sec-1">
        <div class="sec-header"><span>项目进展情况</span></div>
        <div class="filter">
          <div class="filter-item">
            <span v-if="l1RigionList.length > 0">{{ l1RigionList[l1RigionIndex].text }}</span>
            <span v-else>区县</span>
            <a-select ref="select" v-model:value="l1RigionIndex">
              <a-select-option v-for="(item, index) in l1RigionList" :key="index" :value="index">{{ item.text }}</a-select-option>
            </a-select>
          </div>
          <div class="filter-item">
            <span>{{ l1DateDisplay }}</span>
            <a-date-picker v-model:value="l1DateValue" picker="month" :disabled-date="disabledDate" />
          </div>
        </div>
        <div class="echart">
          <XMJZQKChart v-if="l1XData.length > 0" :xData="l1XData" :yData="l1YData" />
        </div>
      </div>
      <div class="sec-2">
        <div class="sec-header"><span>落地项目分析</span></div>
        <div class="echart">
          <LDXMFXChart v-if="l2XData.length > 0" :xData="l2XData" :yData="l2YData" />
        </div>
      </div>
    </div>
    <div class="center-sec">
      <div class="date-filter">
        <div class="picker year-picker">
          <span class="text">{{ r1YearDisplay }}年度</span>
          <img src="@img/2.webp" alt="" />
          <a-date-picker v-model:value="r1YearValue" picker="year" :disabled-date="disabledDate" />
        </div>
        <div class="picker month-picker">
          <span class="text">{{ r1MonthValue }}月</span>
          <img src="@img/2.webp" alt="" />
          <a-select ref="select" v-model:value="r1MonthValue">
            <a-select-option v-for="(item, index) in 12" :key="index" :value="index + 1">{{ index + 1 }}月</a-select-option>
          </a-select>
        </div>
      </div>
      <div class="counts">
        <div class="item">
          <p class="num" style="color: #ffe100">{{ centerData.count1 }}</p>
          <p class="label">项目总数</p>
        </div>
        <div class="item">
          <p class="num" style="color: #26bbff">{{ centerData.sum1 }}</p>
          <p class="label">预期总投资</p>
        </div>
        <div class="item">
          <p class="num" style="color: #ffe100">{{ centerData.count2 }}</p>
          <p class="label">项目总数</p>
        </div>
        <div class="item">
          <p class="num" style="color: #6cffef">{{ centerData.sum2 }}</p>
          <p class="label">签约总投资</p>
        </div>
        <div class="item">
          <p class="num" style="color: #ffe100">{{ centerData.count3 }}</p>
          <p class="label">项目总数</p>
        </div>
        <div class="item">
          <p class="num" style="color: #ff7f2e">{{ centerData.sum3 }}</p>
          <p class="label">实际总投资</p>
        </div>
      </div>
      <div class="texts">
        <div class="item">盯引</div>
        <div class="item">签约</div>
        <div class="item">落地</div>
      </div>
    </div>
    <div class="right-sec">
      <div class="sec-1">
        <div class="sec-header"><span>自贸区3+3+x赛马榜</span></div>
        <div class="tab">
          <div class="tab-item" :class="{ active: r1TabIndex == index }" v-for="(item, index) in rTabList" :key="index" @click="r1TabIndex = index">{{ item }}</div>
        </div>
        <div class="echart">
          <ZMQSMBChart :yData="r1Data" />
        </div>
      </div>
      <div class="sec-2">
        <div class="sec-header"><span>六组赛马场</span></div>
        <div class="tab">
          <div class="tab-item" :class="{ active: r2TabIndex == index }" v-for="(item, index) in rTabList" :key="index" @click="r2TabIndex = index">{{ item }}</div>
        </div>
        <div class="echart">
          <LZSMCChart :yData="r2Data" />
        </div>
      </div>
    </div>
  </page>
</template>

<script setup>
import { ref, defineOptions, onMounted, computed, watch } from 'vue';
import dayjs from 'dayjs';
import XMJZQKChart from './components/xmjzqk-chart.vue'; //项目进展情况
import LDXMFXChart from './components/ldxmfx-chart.vue'; //落地项目分析
import ZMQSMBChart from './components/zmqsmb-chart.vue'; //自贸区3+3+x赛马榜
import LZSMCChart from './components/lzsmc-chart.vue'; //六组赛马场

import { batchDictCodeCombo, getProjectCount, getProjectAnalyze, homeStaticTojsc, getProjectByDepname } from '@/api/home';

defineOptions({
  name: 'home',
});

onMounted(() => {
  getRigiionList();
  getL2Data();
  getCenterData();
  getR1Data();
  getR2Data();
});

const disabledDate = (current) => {
  return current && current > dayjs().endOf('day');
};
// 左一Start
const l1RigionIndex = ref(0);
const l1RigionList = ref([]);
async function getRigiionList() {
  let params = {
    uuid: '/DICT/RISEN_FILE/XMGL/SSQX',
    TYPE: 'jsn_grid',
  };
  const { success, data } = await batchDictCodeCombo(params);
  if (success) {
    l1RigionList.value = data['/DICT/RISEN_FILE/XMGL/SSQX'];
    getL1Data();
  }
}
watch(l1RigionIndex, () => {
  getL1Data();
});

const l1DateValue = ref(''); //时间选择的月份
const l1DateStart = ref(''); //开始时间
const l1DateEnd = ref(''); //结束时间
const l1DateDisplay = computed(() => {
  if (l1DateValue.value) {
    return dayjs(l1DateValue.value).format('YYYY年MM月');
  } else {
    return '月份';
  }
});
watch(l1DateValue, () => {
  l1DateStart.value = dayjs(l1DateValue.value).format('YYYY-MM');
  l1DateEnd.value = dayjs(l1DateValue.value).add(1, 'year').subtract(1, 'month').format('YYYY-MM');
  getL1Data();
});

const l1XData = ref([]);
const l1YData = ref([]);
async function getL1Data() {
  let params = {
    TYPE: 'jsn_grid',
    depuuid: l1RigionList.value[l1RigionIndex.value].desc,
    startDate: l1DateStart.value,
    endDate: l1DateEnd.value,
  };
  const { success, data } = await getProjectCount(params);
  if (success) {
    l1XData.value = data.xData;
    l1YData.value = data.yData;
  }
}
// 左一End

// 左二Start
const l2XData = ref([]);
const l2YData = ref([]);
async function getL2Data() {
  let params = {
    TYPE: 'jsn_grid',
  };
  const { success, data } = await getProjectAnalyze(params);
  if (success) {
    let xData = Object.keys(data).map((v) => v + '月');
    let yData1 = Object.values(data).map((v) => v.COUNT);
    let yData2 = Object.values(data).map((v) => v.SUM);
    let yData = [yData1, yData2];
    l2XData.value = xData;
    l2YData.value = yData;
  }
}
// 左二End

// 中间Start
const centerData = ref({
  count1: 0, //盯引数量
  sum1: 0, //盯引金额
  count2: 0, //签约数量
  sum2: 0, //签约金额
  count3: 0, //落地数量
  sum3: 0, //落地金额
});
async function getCenterData() {
  let params = {
    TYPE: 'jsn_grid',
  };
  const { success, data } = await homeStaticTojsc(params);
  if (success) {
    centerData.value = data;
  }
}
// 中间End

// 右一Start
const rTabList = ref(['盯引项目数', '落地项目数', '落地项目金额']);
const r1YearValue = ref(dayjs()); //年份
const r1MonthValue = ref(dayjs().format('MM')); //月份
const r1YearDisplay = ref(dayjs().format('YYYY')); //显示的年份
const r1Data = ref([]);
const r1TabIndex = ref(0);
watch(r1YearValue, () => {
  r1YearDisplay.value = r1YearValue.value.format('YYYY');
  getR1Data();
});
watch(r1MonthValue, () => {
  getR1Data();
});
watch(r1TabIndex, () => {
  getR1Data();
});
async function getR1Data() {
  let params = {
    TYPE: 'jsn_grid',
    type: r1TabIndex.value,
    classify: 0,
    year: r1YearDisplay.value,
    month: r1MonthValue.value,
  };
  const { success, data } = await getProjectByDepname(params);
  if (success) {
    let list = [];
    Object.keys(data).forEach((v) => {
      list.push({
        name: v,
        val: data[v],
      });
    });
    r1Data.value = list;
  }
}
// 右一End

// 右二Start
const r2TabIndex = ref(0);
const r2Data = ref([]);
watch(r2TabIndex, () => {
  getR2Data();
});
async function getR2Data() {
  let params = {
    TYPE: 'jsn_grid',
    type: r2TabIndex.value,
    classify: 1,
  };
  const { success, data } = await getProjectByDepname(params);
  if (success) {
    let list = [];
    Object.keys(data).forEach((v) => {
      list.push({
        name: v,
        val: data[v],
      });
    });
    r2Data.value = list;
  }
}
// 右二End
</script>

<style scoped lang="less">
@import './index.less';
</style>
